// Conditional Media Query Mixin
// by @sheiko (http://dsheiko.com)

// The problem this mixin solves is explained there 
// http://css-tricks.com/conditional-media-query-mixins/

// https://github.com/dsheiko
// MIT license: http://www.opensource.org/licenses/mit-license.php

// Predefined Break-points
$mediaMaxWidth: 640px;
$mediaBp1Width: 480px;
$mediaMinWidth: 320px;

$condMap: ("screen": "only screen", "print": "only print", "retina": "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)", ">maxWidth": "(min-width: #{$mediaMaxWidth + 1})", "<maxWidth": "(max-width: #{$mediaMaxWidth})", ">bp1Width": "(min-width: #{$mediaBp1Width + 1})", "<bp1Width": "(max-width: #{$mediaBp1Width})", ">minWidth": "(min-width: #{$mediaMinWidth + 1})", "<minWidth": "(max-width: #{$mediaMinWidth})");

@function translate-media-condition($c) {
    @return map-get($condMap, $c);
}

// The mdia mixin
@mixin mediaquery($args...) {
    $query: "";
    @each $arg in $args {
        $op: "";
        @if $query != "" {
            $op: " and ";
        }
        $query: $query + $op + translate-media-condition($arg);
    }
    @media #{$query} {
        @content;
    }
}



// .section {
//   border: 2px solid #777;
//   padding: 40px;
//   background: silver;
//   @include media( "retina" ){
//     border: 2px dotted #000;
//   };
//   @include media( "screen", ">bp1Width", "<maxWidth" ){
//     background: red;
//     color: white;
//   };
//     @include media( "screen", ">minWidth", "<bp1Width" ){
//     background: green;
//     color: white;
//   };
//     @include media( "screen", "<minWidth" ){
//     background: blue;
//     color: white;
//   };
// }